<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12">
          <q-card class="card-bg text-white no-shadow" bordered>
            <q-card-section class="text-h6">
              <div class="text-h6">编辑信息</div>
              <div class="text-subtitle2">完善个人资料</div>
            </q-card-section>
            <q-card-section class="q-pa-sm">
              <q-list class="row">
                <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <q-item-section side>
                    <q-avatar size="100px">
                      <img :src="baseImg2" />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-btn
                      label="添加头像"
                      class="text-capitalize"
                      rounded
                      color="info"
                      style="max-width: 120px"
                    ></q-btn>
                  </q-item-section>
                </q-item>

                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.user_name"
                      label="用户名"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.email"
                      label="邮箱"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.first_name"
                      label="姓"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.last_name"
                      label="名"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      autogrow
                      dense
                      v-model="user_details.address"
                      label="地址"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.city"
                      label="城市"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      dense
                      v-model="user_details.post_code"
                      label="邮编"
                    />
                  </q-item-section>
                </q-item>
                <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <q-item-section>
                    <q-input
                      dark
                      color="white"
                      type="textarea"
                      dense
                      v-model="user_details.about"
                      label="关于"
                    />
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
            <q-card-actions align="right">
              <q-btn class="text-capitalize bg-info text-white"
                >更新用户信息</q-btn
              >
            </q-card-actions>
          </q-card>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
          <q-card class="card-bg text-white no-shadow" bordered>
            <q-card-section class="text-center bg-transparent">
              <q-avatar size="100px" class="shadow-10">
                <img :src="baseImg2" />
              </q-avatar>
              <div class="text-subtitle2 q-mt-lg">作者</div>
              <div class="text-h6 q-mt-md">王王</div>
            </q-card-section>
            <q-card-section>
              <div class="text-body2 text-justify">
                半吊子得不到幸福。
                因为你既不能享受保守神圣的幸福，也不能真心的全心享受到开放自由的幸福
              </div>
            </q-card-section>
          </q-card>
        </div>

        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12">
          <q-card class="card-bg text-white no-shadow" bordered>
            <q-card-section class="text-h6 q-pa-sm">
              <div class="text-h6">修改密码</div>
            </q-card-section>
            <q-card-section class="q-pa-sm row">
              <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <q-item-section>当前密码 </q-item-section>
              </q-item>
              <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <q-item-section>
                  <q-input
                    type="password"
                    dark
                    dense
                    outlined
                    color="white"
                    round
                    v-model="password_dict.current_password"
                    label="当前密码"
                  />
                </q-item-section>
              </q-item>
              <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <q-item-section> 新密码 </q-item-section>
              </q-item>
              <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <q-item-section>
                  <q-input
                    type="password"
                    dark
                    dense
                    outlined
                    color="white"
                    round
                    v-model="password_dict.new_password"
                    label="新密码"
                  />
                </q-item-section>
              </q-item>
              <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <q-item-section> 确认新密码 </q-item-section>
              </q-item>
              <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <q-item-section>
                  <q-input
                    type="password"
                    dark
                    dense
                    outlined
                    round
                    color="white"
                    v-model="password_dict.confirm_new_password"
                    label="确认新密码"
                  />
                </q-item-section>
              </q-item>
            </q-card-section>
            <q-card-actions align="right">
              <q-btn class="text-capitalize bg-info text-white">更改密码</q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { baseImg2 } from 'pages/data/list';
const user_details = {
  user_name: 'user_name',
  email: 'email',
  first_name: 'first_name',
  last_name: 'last_name',
  address: 'address',
  city: 'city',
  post_code: 'post_code',
  about: 'about',
};
const password_dict = {
  current_password: 'current_password',
  new_password: 'new_password',
  confirm_new_password: 'confirm_new_password',
};
</script>

<style scoped>
.card-bg {
  background-color: #162b4d;
}
</style>
